<script setup>
import {onLoad} from "@dcloudio/uni-app"
import {ref} from 'vue'

const day = ref('')
const popupShow = ref(false)
const modalShow = ref(false)
const Hours = ref([
  '9:00',
  '10:00',
  '11:00',
  '12:00',
  '13:00',
  '14:00',
  '15:00',
  '16:00',
  '17:00',
  '18:00',
  '19:00',
  '20:00',
])
const from = ref({
  selectHours: '',
  total: ''
})

const title = ref('')
const content = ref('')
onLoad(option => day.value = option.day)
const submit = () => {
  if (from.value.selectHours && from.value.total) {
    title.value = '消息提醒'
    content.value = `预约成功，请于${day.value}${from.value.selectHours}之前使用`
  } else {
    title.value = '表单验证错误'
    content.value = '前填写完整表单信息'
  }
  modalShow.value = true
}
</script>

<template>
  <view class="kitchen content">
    <view class="card">
      <view class="container">
        <image class="image"
               src="https://gd-hbimg.huaban.com/bbe122c5bcf00d3d4b95fde7e6ae82c19501087230c5e-bqpj57"></image>
        <view class="info">
          <view class="title">厨房预约</view>
          <view class="condition">
            <view class="one">人数：最多容纳10人</view>
            <view class="two">时间：9:00-14:00 15:00-20:00</view>
          </view>
          <view class="desc">需学生和老师一起使用登记，以
            宿舍，班级，学生组织为单位进行申请，最多容纳10人左右就餐
          </view>
        </view>
      </view>
      <view class="select link" @click="popupShow=true">
        预约信息
      </view>
    </view>
    <view class="card">
      <view class="container">
        <image class="image"
               src="https://tse1-mm.cn.bing.net/th/id/OIP-C.kUIHOfEBQrV22WR9jQ3EIgHaFj?w=208&h=180&c=7&r=0&o=5&pid=1.7"></image>
        <view class="info">
          <view class="title">共享咖啡杯吧</view>
          <view class="condition">
            <view class="one">人数：最多容纳10人</view>
            <view class="two">时间：9:00-14:00 15:00-20:00</view>
          </view>
          <view class="desc">需学生和老师一起使用登记，以
            宿舍，班级，学生组织为单位进行申请，最多容纳10人左右就餐
          </view>
        </view>
      </view>
      <view class="select link" @click="popupShow=true">
        预约信息
      </view>
    </view>
    <view class="card">
      <view class="container">
        <image class="image"
               src="https://tse4-mm.cn.bing.net/th/id/OIP-C.tHiMl7dxRJNeUpXzY7ectwHaFj?w=234&h=180&c=7&r=0&o=5&pid=1.7"></image>
        <view class="info">
          <view class="title">共享自习室</view>
          <view class="condition">
            <view class="one">人数：最多容纳10人</view>
            <view class="two">时间：9:00-14:00 15:00-20:00</view>
          </view>
          <view class="desc">需学生和老师一起使用登记，以
            宿舍，班级，学生组织为单位进行申请，最多容纳10人左右就餐
          </view>
        </view>
      </view>
      <view class="select link" @click="popupShow=true">
        预约信息
      </view>
    </view>
    <view class="card">
      <view class="container">
        <image class="image"
               src="https://tse2-mm.cn.bing.net/th/id/OIP-C.eI7QM7rYkR_LcOuQF5f4owHaMm?w=115&h=182&c=7&r=0&o=5&pid=1.7"></image>
        <view class="info">
          <view class="title">共享打印机</view>
          <view class="condition">
            <view class="one">人数：最多容纳10人</view>
            <view class="two">时间：9:00-14:00 15:00-20:00</view>
          </view>
          <view class="desc">需学生和老师一起使用登记，以
            宿舍，班级，学生组织为单位进行申请，最多容纳10人左右就餐
          </view>
        </view>
      </view>
      <view class="select link" @click="popupShow=true">
        预约信息
      </view>
    </view>

  </view>
  <u-popup :round="15" :show="popupShow" @close="popupShow=false">
    <view class="popup content">
      <view class="hours">
        <view
            v-for="(hour, i) in Hours"
            :key="i" :class="['hour',{'active':hour===from.selectHours}]"
            @click="from.selectHours=hour"
        >{{ hour }}
        </view>
      </view>
      <u-input
          v-model="from.total"
          border="surround"
          class="input"
          clearable
          placeholder="请输入预约人数"
          type="number"
      ></u-input>
      <u-button class="submit" @click="submit">马上预约</u-button>
    </view>
  </u-popup>
  <view>
    <u-modal :content="content" :show="modalShow" :title="title" @confirm="()=>{
      popupShow=false
      modalShow=false
    }"></u-modal>
  </view>
</template>

<style lang="scss" scoped>
.kitchen {
  width: 100%;
  height: calc(100vh - 44px);
  background: #eeeeee;
}

.kitchen > .card {
  width: 100%;
  height: 190px;
  border-radius: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  background: white;
}

.kitchen > .card > .container {
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kitchen > .card > .container > .image {
  width: 100px;
  height: 140px;
  border-radius: 10px;
  margin-right: 15px;
}

.kitchen > .card > .container > .info {
  height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kitchen > .card > .container > .info > .title {
  font-size: 22px;
  font-weight: bold;
}

.kitchen > .card > .container > .info > .condition {
  font-size: 13px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #2381c4;
}

.kitchen > .card > .container > .info > .desc {
  font-size: 13px;
  color: #aaa;
}

.kitchen > .card > .select {
  writing-mode: vertical-lr;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: #2fc1f0;
}

.popup {
  width: 100%;
  height: 250px;
}

.popup > .hours {
  width: 100%;
  height: 150rpx;
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(2, auto);
  grid-gap: 7px;
}

.popup > .hours > .hour {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid #777777;
  color: #1583e4;
  border-radius: 5px;
}

.popup > .input {
  margin-top: 20px;
  border: 1px solid #444 !important;
}

.popup > .submit {
  margin-top: 20px;
  background: dodgerblue;
  color: white;
  border-radius: 25px;
}

.active {
  outline: 2px solid #3195c2 !important;
}
</style>